<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <view class="nav-title">理论考试</view>
      <view class="nav-right" @tap="goToResults">
        <text class="fa fa-bell-o search-icon fa-gray"></text>
      </view>
    </view>

    <!-- 主内容 -->
    <view class="content">
      <!-- 搜索框 -->
      <view class="search-container">
        <view class="search-box">
          <text class="fa fa-search search-icon"></text>
          <input
            class="search-input"
            type="text"
            placeholder="搜索考试"
            v-model="searchKeyword"
            @input="onSearch"
          />
        </view>
      </view>

      <!-- 状态标签页 -->
      <view class="tabs-container">
        <view class="tabs">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab-item"
            :class="{ 'tab-item-active': activeTab === index }"
            @tap="switchTab(index)"
          >
            <text
              class="tab-text"
              :class="{ 'tab-text-active': activeTab === index }"
            >
              {{ tab }}
            </text>
            <view v-if="activeTab === index" class="tab-indicator"></view>
          </view>
        </view>
      </view>

      <!-- 考试列表 -->
      <scroll-view scroll-y class="exam-list">
        <!-- 考试卡片1 - 未开始 -->
        <view class="exam-card" @tap="goToExamDetail('not-started')">
          <view class="exam-content">
            <view class="exam-icon exam-icon-blue">
              <text class="fa fa-file-text"></text>
            </view>
            <view class="exam-info">
              <text class="exam-title">心肺复苏术理论考试</text>
              <text class="exam-time">开始：2025.01.20 14:00</text>
              <text class="exam-time">结束：2025.01.20 14:45</text>
            </view>
            <view class="exam-status-wrap">
              <view class="exam-status exam-status-gray">
                <text class="exam-status-text">未开始</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 考试卡片2 - 进行中（培训项目） -->
        <view class="exam-card" @tap="goToExamDetail('ongoing')">
          <view class="exam-content">
            <view class="exam-icon exam-icon-purple">
              <text class="fa fa-graduation-cap"></text>
            </view>
            <view class="exam-info">
              <text class="exam-title">住院医师规范化培训阶段考试</text>
              <text class="exam-project">项目：住院医师规范化培训</text>
              <text class="exam-time">开始：2025.01.18 09:00</text>
              <text class="exam-time">结束：2025.01.18 10:30</text>
            </view>
            <view class="exam-status-wrap">
              <view class="exam-status exam-status-green">
                <text class="exam-status-text">进行中</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 考试卡片3 - 已结束 + 已交卷 -->
        <view class="exam-card" @tap="goToExamDetail('submitted')">
          <view class="exam-content">
            <view class="exam-icon exam-icon-blue">
              <text class="fa fa-file-text"></text>
            </view>
            <view class="exam-info">
              <text class="exam-title">医疗器械消毒规范考试</text>
              <text class="exam-time">开始：2025.01.15 10:30</text>
              <text class="exam-time">结束：2025.01.15 11:00</text>
              <view class="exam-badges">
                <view class="exam-badge exam-badge-blue">
                  <text class="exam-badge-text">已交卷</text>
                </view>
                <text class="exam-score">85分</text>
              </view>
            </view>
            <view class="exam-status-wrap">
              <view class="exam-status exam-status-gray">
                <text class="exam-status-text">已结束</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 考试卡片4 - 进行中（培训项目） -->
        <view class="exam-card" @tap="goToExamDetail('completed')">
          <view class="exam-content">
            <view class="exam-icon exam-icon-purple">
              <text class="fa fa-graduation-cap"></text>
            </view>
            <view class="exam-info">
              <text class="exam-title">ICU专科医师培训考核</text>
              <text class="exam-project">项目：ICU专科医师培训</text>
              <text class="exam-time">开始：2025.01.22 15:00</text>
              <text class="exam-time">结束：2025.01.22 16:00</text>
            </view>
            <view class="exam-status-wrap">
              <view class="exam-status exam-status-green">
                <text class="exam-status-text">进行中</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 考试卡片5 - 已结束 + 未交卷 -->
        <view class="exam-card" @tap="goToExamDetail('missed')">
          <view class="exam-content">
            <view class="exam-icon exam-icon-blue">
              <text class="fa fa-file-text"></text>
            </view>
            <view class="exam-info">
              <text class="exam-title">药物过敏反应处理考试</text>
              <text class="exam-time">开始：2025.01.25 16:30</text>
              <text class="exam-time">结束：2025.01.25 16:55</text>
              <view class="exam-badges">
                <view class="exam-badge exam-badge-red">
                  <text class="exam-badge-text">未交卷</text>
                </view>
              </view>
            </view>
            <view class="exam-status-wrap">
              <view class="exam-status exam-status-gray">
                <text class="exam-status-text">已结束</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 没有更多数据 -->
        <view class="no-more">
          <text class="no-more-text">没有更多数据了</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      searchKeyword: "",
      activeTab: 0,
      tabs: ["全部", "未开始", "进行中", "已结束"],
    };
  },
  onLoad() {
    // 获取系统状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },
  methods: {
    // 返回
    goBack() {
      uni.navigateBack();
    },

    // 搜索
    onSearch(e) {
      console.log("搜索关键词:", e.detail.value);
      // 实现搜索逻辑
    },

    // 切换标签页
    switchTab(index) {
      this.activeTab = index;
      console.log("切换到标签:", this.tabs[index]);
      // 根据标签筛选考试列表
    },

    // 进入考试详情
    goToExamDetail(status) {
      const urlMap = {
        "not-started": "/pages/exam-detail-not-started/exam-detail-not-started",
        ongoing: "/pages/exam-detail-ongoing/exam-detail-ongoing",
        completed: "/pages/exam-detail-completed/exam-detail-completed",
        submitted: "/pages/exam-detail-submitted/exam-detail-submitted",
        missed: "/pages/exam-detail-missed/exam-detail-missed",
      };

      uni.navigateTo({
        url:
          urlMap[status] ||
          "/pages/exam-detail-not-started/exam-detail-not-started",
      });
    },

    // 导航方法
    goToResults() {
      uni.navigateTo({
        url: "/pages/results/results",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 88rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-left {
  position: absolute;
  left: 32rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #000000;
}

.nav-right {
  position: absolute;
  right: 32rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx;
}

.icon {
  font-size: 40rpx;
}

/* 主内容 */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 搜索框 */
.search-container {
  padding: 24rpx 32rpx;
}

.search-box {
  background-color: #f3f4f6;
  border-radius: 24rpx;
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.search-icon {
  font-size: 32rpx;
  color: #9ca3af;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  background-color: transparent;
}

/* 标签页 */
.tabs-container {
  padding: 0 32rpx;
  margin-top: 24rpx;
}

.tabs {
  display: flex;
  border-bottom: 2rpx solid #e5e7eb;
}

.tab-item {
  flex: 1;
  padding: 24rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.tab-text {
  font-size: 28rpx;
  color: #6b7280;
}

.tab-text-active {
  color: #2563eb;
  font-weight: 500;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  width: 48rpx;
  height: 4rpx;
  background-color: #2563eb;
  border-radius: 2rpx;
}

/* 考试列表 */
.exam-list {
  flex: 1;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
}

.exam-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  border: 2rpx solid #f3f4f6;
}

.exam-content {
  display: flex;
  gap: 24rpx;
}

.exam-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 40rpx;
}

.exam-icon-blue {
  background-color: #dbeafe;
}

.exam-icon-purple {
  background-color: #f3e8ff;
}

.exam-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.exam-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8rpx;
  word-break: break-all;
}

.exam-project {
  font-size: 24rpx;
  color: #6b7280;
}

.exam-time {
  font-size: 24rpx;
  color: #9ca3af;
}

.exam-badges {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-top: 8rpx;
  flex-wrap: wrap;
}

.exam-badge {
  padding: 8rpx 16rpx;
  border-radius: 24rpx;
}

.exam-badge-blue {
  background-color: #eff6ff;
}

.exam-badge-red {
  background-color: #fef2f2;
}

.exam-badge-text {
  font-size: 24rpx;
  font-weight: 500;
}

.exam-badge-blue .exam-badge-text {
  color: #1d4ed8;
}

.exam-badge-red .exam-badge-text {
  color: #b91c1c;
}

.exam-score {
  font-size: 24rpx;
  color: #16a34a;
  font-weight: 500;
}

.exam-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.exam-status {
  padding: 8rpx 16rpx;
  border-radius: 24rpx;
}

.exam-status-gray {
  background-color: #f9fafb;
}

.exam-status-green {
  background-color: #f0fdf4;
}

.exam-status-text {
  font-size: 24rpx;
  font-weight: 500;
  white-space: nowrap;
}

.exam-status-gray .exam-status-text {
  color: #374151;
}

.exam-status-green .exam-status-text {
  color: #15803d;
}

/* 没有更多数据 */
.no-more {
  text-align: center;
}

.no-more-text {
  font-size: 28rpx;
  color: #9ca3af;
}
.fa-file-text {
  color: #2563eb;
}
.fa-graduation-cap {
  color: rgb(147 51 234);
}
</style>

